<template>
  <div :class="layoutCls">
    <t-head-menu :class="menuCls" @change="changeHandler" :theme="theme" expandType="popup" :value="active">
      <template #logo>
        <img v-if="site_tag === 'jt'" width="55" height="55" class="logo" src="/jt-logo.png" alt="logo">

        <div v-if="site_tag === 'jtt'"
          style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0px 10px;font-size: 20px;color: #fff;font-weight: bold">
          <div class="textSpace">{{ company_name }}</div>
          <div class="textSpace">{{ site_name }}</div>
        </div>
        <div v-else
          style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0px 10px;font-size: 20px;color: #fff;font-weight: bold">

          <div class="textSpace">{{ company_name }}</div>
          <div class="textSpace">{{ site_name }}</div>
        </div>
      </template>
      <t-button style="color: #fff;margin-right: 4px;flex-shrink: 0" theme="default" shape="square" variant="text"
        @click="changeCollapsed">
        <t-icon name="view-list" class="collapsed-icon" />
      </t-button>
      <menu-header-content v-show="layout !== 'side'" class="header-menu" :headerMenuWidth="headerMenuWidth"
        :navData="menu" />
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <!--          <search v-if="layout !== 'side'" :layout="layout" />-->

          <!-- 全局通知 -->
          <notice />
          <t-tooltip placement="bottom" content="帮助中心">
            <t-button style="color: #fff" theme="default" shape="square" variant="text" @click="clickHelp">
              <t-icon name="help-circle" />
            </t-button>
          </t-tooltip>
          <t-tooltip v-if="isfullScreen === false" placement="bottom" content="点击切换全屏模式">
            <t-button style="color: #fff" theme="default" shape="square" variant="text" @click="fullScreen">
              <t-icon name="fullscreen" />
            </t-button>
          </t-tooltip>
          <t-tooltip v-else placement="bottom" content="点击退出全屏模式">
            <t-button style="color: #fff" theme="default" shape="square" variant="text" @click="fullScreen">
              <t-icon name="fullscreen-exit" />
            </t-button>
          </t-tooltip>
          <t-dropdown :min-column-width="125" trigger="click">
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
                  <t-icon name="user-circle" />个人中心
                </t-dropdown-item>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                  <t-icon name="poweroff" />退出登录
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
            <t-button class="header-user-btn" theme="default" variant="text">
              <template #icon>
                <t-icon name="user-circle" class="header-user-avatar" />
              </template>
              <div class="header-user-account">
                {{ name }}
                <t-icon name="chevron-down" />
              </div>
            </t-button>
          </t-dropdown>
        </div>
      </template>
    </t-head-menu>
  </div>
</template>

<script>
import Vue from 'vue';
import { prefix } from '@/config/global';
// import LogoFull from '@/assets/assets-logo-full.svg';

import Notice from './Notice.vue';
// import Search from './Search.vue';
import MenuHeaderContent from './MenuHeaderContent';
import { mapState } from "vuex";
import store from "@/store";
import router from "@/router/index";

export default Vue.extend({
  components: {
    MenuHeaderContent,
    // LogoFull,
    Notice,
    // Search,
  },
  props: {
    theme: String,
    layout: {
      type: String,
      default: 'top',
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    menu: {
      type: Array,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    isCompact: {
      type: Boolean,
      default: false,
    },
    maxLevel: {
      type: Number,
      default: 3,
    },
  },
  data () {
    return {
      prefix,
      visibleNotice: false,
      isSearchFocus: false,
      popupVisible: false,
      isfullScreen: false,
      company_name: import.meta.env.VITE_COMPANY_NAME,
      site_name: import.meta.env.VITE_SITE_NAME,
      site_tag: import.meta.env.VITE_SITE_TAG,
      headerMenuWidth: 0
    };
  },
  computed: {
    ...mapState('user', ['name']),
    active () {
      if (!this.$route.path) {
        return '';
      }
      return this.$route.path
        .split('/')
        .filter((item, index) => index <= this.maxLevel && index > 0)
        .map((item) => `/${item}`)
        .join('');
    },
    showMenu () {
      return !(this.layout === 'mix' && this.showLogo === 'side');
    },
    layoutCls () {
      return [`${this.prefix}-header-layout`];
    },
    menuCls () {
      return [
        {
          [`${this.prefix}-header-menu`]: !this.isFixed,
          [`${this.prefix}-header-menu-fixed`]: this.isFixed,
          [`${this.prefix}-header-menu-fixed-side`]: this.layout === 'side' && this.isFixed,
          [`${this.prefix}-header-menu-fixed-side-compact`]: this.layout === 'side' && this.isFixed && this.isCompact,
        },
      ];
    },
  },
  mounted () {
    const headerMenu = document.querySelector('.t-head-menu .t-menu');
    // if(headerMenu.length>0){
    //   this.headerMenuWidth = headerMenu[0].clientWidth;
    // }
    this.headerMenuWidth = headerMenu.clientWidth - 32;
  },
  methods: {
    // getImageUrl(){
    //   return new URL(`../../assets/天妇.png`, import.meta.url).href
    // },
    changeHandler (active) {
      const pathName = document.location.pathname;
      const rootPath = pathName.substring(0, pathName.substr(1).indexOf('/') + 1)
      // 如果切换项目移除 并添加首页跳转
      let path = active;
      this.$store.state.permission.routers.forEach(router => {
        if (router.path === active) {
          // 设置当前子系统的路由
          this.$store.commit('permission/setCurrentSystemRouters', router);
          if (router.children.length > 0 && router.children[0].redirect) {
            path = router.children[0].redirect;
          } else {
            path = router.redirect || active;
          }
        }
      })
      // 如果当前路径包含active 同一个子系统 则不执行删除tab
      if (!rootPath.includes(active)) {
        this.$store.commit('tabRouter/removeTabRouterList', path);
      }
    },
    onPopupVisibleChange (val) {
      this.popupVisible = val;
    },
    toggleSettingPanel () {
      this.$store.commit('setting/toggleSettingPanel', true);
    },
    handleLogout () {
      this.$store.dispatch('user/LogOut').then(() => {
        this.$router.push(`/login`);
      }).catch((err) => {
        this.$store.dispatch('user/FedLogOut');
        this.$router.push(`/login`);
      });
    },
    changeCollapsed () {
      this.$store.commit('setting/toggleSidebarCompact');
    },
    handleNav (url) {
      this.$router.push(url);
    },
    fullScreen () {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
        this.isfullScreen = true;
      } else if (document.exitFullscreen) {
        document.exitFullscreen();
        this.isfullScreen = false;
      }
    },
    clickHelp () {
      this.$router.push('/user/help')
      // const elink = document.createElement('a')
      // elink.href = '/view/2022/12/9/科技项目管理子系统用户手册.pdf'
      // // elink.setAttribute('download', '科技项目管理子系统用户手册.pdf')
      // elink.setAttribute('target', '_blank')
      // elink.style.display = 'none'
      // document.body.appendChild(elink)
      // setTimeout(() => {
      //   elink.click()
      //   document.body.removeChild(elink)
      // }, 66)
    }
  },
});
</script>
<style lang="less">
@import '@/style/variables.less';

.textSpace {
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
  width: 100%;
}



.header-menu {
  //flex: 1 1 1;
  flex: 1;
  display: inline-flex;
}

.operations-container {
  display: flex;
  align-items: center;
  margin-right: 12px;

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin: 0 8px;

    &.header-user-btn {
      margin: 0;
      color: #fff;
    }

    .header-user-account {
      color: #fff;
      font-weight: bold;
    }

    &.t-button--variant-text:hover {
      //background-color: #3378FF;
      //border-color: #3378FF;
      background-color: transparent;
      border-color: transparent;
    }

    //&:hover{
    //  background-color: #3378FF;
    //}
  }

  .t-icon {
    font-size: 20px;

    &.general {
      margin-right: 16px;
    }
  }
}

.header-operate-left {
  display: flex;
  margin-left: 20px;
  align-items: normal;
  line-height: 0;

  .collapsed-icon {
    font-size: 20px;
  }
}

.header-logo-container {
  width: 184px;
  height: 26px;
  display: flex;
  margin-left: 24px;
  color: @text-color-primary;

  .t-logo {
    width: 100%;
    height: 100%;

    &:hover {
      cursor: pointer;
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: @text-color-primary;

  .t-icon {
    margin-left: 4px;
    font-size: 16px;
  }
}

.t-head-menu__inner {
  //height: 70px;
  border-bottom: 1px solid @border-level-1-color;
  //background-color: #006CD9;
  background-color: #006eff;

  .t-menu__item {
    min-width: auto;
    padding: 10px;

    &:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
      //background-color: #3378FF;
      background-color: transparent;
    }
  }

  .t-menu__logo {
    flex-shrink: 0;
  }

  .t-menu__logo:not(:empty) {
    margin-right: 0px;
  }

  .t-menu__item.t-is-active {
    //background-color: #3378FF;
    background-color: transparent;
    font-weight: bold;

    .t-menu__content::after {
      content: '';
      border-bottom: 3px solid #fff;
      width: 30px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      text-align: center;
      position: absolute;
    }

  }

  .t-menu__item {
    color: #fff;
    font-size: 18px;

    :hover {
      font-weight: bold;
    }
  }

  .t-button--variant-text:hover {
    //background-color: #3378FF;
    //border-color: #3378FF;
    background-color: transparent;
    border-color: transparent;
  }

  //.t-menu{
  //  overflow: hidden;
  //}
}

.t-menu--light {
  .header-user-account {
    color: @text-color-primary;
  }
}

.t-menu--dark {
  .t-head-menu__inner {
    border-bottom: 1px solid var(--td-gray-color-10);
  }

  .header-user-account {
    color: rgba(255, 255, 255, 0.55);
  }

  .t-button {
    --ripple-color: var(--td-gray-color-10) !important;

    &:hover {
      background: var(--td-gray-color-12) !important;
    }
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  .t-icon {
    margin-right: 8px;
  }

  .t-dropdown__item {
    .t-dropdown__item__content {
      display: flex;
      justify-content: center;
    }

    .t-dropdown__item__content__text {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
  }

  .t-dropdown__item {
    width: 100%;
    margin-bottom: 0px;
  }

  &:last-child {
    .t-dropdown__item {
      margin-bottom: 8px;

    }
  }
}
</style>
